<template>
  <div class="custom-tabs">
    <div
      v-for="tab in tabs"
      :key="tab.name"
      :class="['custom-tab', { active: activeTab === tab.name }]"
      @click="handleTabClick(tab.name)"
    >
      {{ tab.label }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";

interface Tab {
  name: string;
  label: string;
}

interface Props {
  tabs: Tab[];
  modelValue: string;
}

interface Emits {
  (e: "update:modelValue", value: string): void;
  (e: "change", value: string): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

// 当前激活的标签
const activeTab = computed(() => props.modelValue);

// 标签切换处理
const handleTabClick = (tabName: string) => {
  emit("update:modelValue", tabName);
  emit("change", tabName);
};
</script>

<style scoped lang="scss">
// 自定义标签栏样式
.custom-tabs {
  display: flex;
  gap: 0;
}

.custom-tab {
  padding: 6px 24px;
  height: 32px;
  display: flex;
  align-items: center;
  border: 1px solid #d1d5db;
  background-color: #ffffff;
  color: #6b7280;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
  font-size: 14px;
  margin-left: -1px;

  &:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    margin-left: 0;
  }

  &:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }

  &:hover {
    background-color: #f3f4f6;
    position: relative;
    z-index: 1;
  }

  &.active {
    background-color: #ffffff;
    border-color: #107082;
    color: #107082;
    position: relative;
    z-index: 2;
  }
}
</style>
